ওয়েব ডিজাইন (Web Design) হলো এমন একটি প্রক্রিয়া যার মাধ্যমে একটি ওয়েবসাইটের আকার, বিন্যাস, রং, ফন্ট, গ্রাফিক্স, এবং ইউজার ইন্টারফেস তৈরি করা হয়। এটি একটি ওয়েবসাইটকে ব্যবহারকারীর জন্য কার্যকরী, দৃষ্টিনন্দন, এবং সহজবোধ্য করে তোলে। ওয়েব ডিজাইনের প্রধান কাজ হলো ব্যবহারকারীদের অভিজ্ঞতা উন্নত করা এবং সাইটে নেভিগেশনকে সহজ করা। আধুনিক ওয়েব ডিজাইন শুধু ডেস্কটপের জন্যই নয়, মোবাইল এবং ট্যাবলেটের মতো অন্যান্য ডিভাইসের জন্যও গুরুত্বপূর্ণ।
ওয়েব ডিজাইনের মূল উপাদান:
১. লেআউট (Layout):
- লেআউট হলো ওয়েবসাইটের কাঠামো, যেখানে বিভিন্ন উপাদান যেমন হেডার, ফুটার, মেনু, এবং কন্টেন্ট রাখা হয়। এটি ওয়েবসাইটের সঠিক বিন্যাস এবং ব্যবহারকারীদের সহজে তথ্য খুঁজে পাওয়ার ব্যবস্থা করে।
২. গ্রাফিক্স (Graphics):
- ওয়েবসাইটে ব্যবহৃত ছবি, লোগো, এবং আইকনগুলোই গ্রাফিক্স। এগুলো ওয়েবসাইটকে দৃষ্টিনন্দন এবং তথ্যপূর্ণ করে তোলে।
৩. ফন্ট এবং রং (Fonts and Colors):
- ওয়েবসাইটে ব্যবহৃত ফন্ট এবং রং ওয়েবসাইটের দৃষ্টিনন্দনতা এবং ব্র্যান্ড পরিচিতি নির্ধারণ করে। এর মাধ্যমে ব্যবহারকারীর মনোযোগ আকর্ষণ করা হয়।
৪. ইউজার ইন্টারফেস (User Interface - UI):
- ওয়েবসাইটের ব্যবহারকারীর সাথে যোগাযোগের পদ্ধতিকে UI বলা হয়। এটি একটি ওয়েবসাইটকে কার্যকরী এবং ব্যবহারকারীদের জন্য সহজে নেভিগেট করার সুযোগ দেয়।
৫. রেসপনসিভ ডিজাইন (Responsive Design):
- রেসপনসিভ ডিজাইন হলো ওয়েবসাইটের এমন একটি ফিচার যা বিভিন্ন আকারের ডিভাইসে (ডেস্কটপ, মোবাইল, ট্যাবলেট) উপযুক্তভাবে প্রদর্শিত হয়।
HTML (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ):
HTML (Hypertext Markup Language) হলো ওয়েবসাইট তৈরি করার জন্য ব্যবহৃত একটি প্রাথমিক ভাষা। HTML মূলত ওয়েব পেজের স্ট্রাকচার বা কাঠামো তৈরি করে, যেখানে বিভিন্ন উপাদান যেমন টেক্সট, ইমেজ, এবং লিঙ্ক স্থাপন করা হয়। HTML ব্যবহার করে ওয়েবসাইটের বেসিক কাঠামো তৈরি করা হয়, যা ব্রাউজারকে নির্দেশ দেয় কীভাবে একটি ওয়েব পেজ প্রদর্শিত হবে।
HTML এর প্রধান উপাদানসমূহ:
১. ট্যাগ (Tag):
- HTML ট্যাগ হলো নির্দেশনা যা ব্রাউজারকে জানায় কীভাবে কন্টেন্ট প্রদর্শন করতে হবে। প্রতিটি HTML ট্যাগের শুরু এবং শেষ থাকে। উদাহরণ:
..., ...।
২. এলিমেন্ট (Element):
- HTML এলিমেন্ট হলো ট্যাগ এবং তার মধ্যে থাকা কন্টেন্ট। উদাহরণ:
এটি একটি প্যারাগ্রাফ
৩. অ্যাট্রিবিউট (Attribute):
- HTML অ্যাট্রিবিউট হলো ট্যাগের কিছু অতিরিক্ত তথ্য যা উপাদানের বৈশিষ্ট্য নির্ধারণ করে। উদাহরণ:
একটি সাধারণ HTML ডকুমেন্টের উদাহরণ:
আমার প্রথম ওয়েব পেজ
স্বাগতম!
এটি আমার প্রথম HTML পেজ।
উদাহরণটি একটি সাধারণ HTML পেজ দেখায়, যেখানে হেডারে একটি শিরোনাম </code> এবং বডিতে একটি প্রধান শিরোনাম <code><h1></code> এবং একটি প্যারাগ্রাফ <code><p></code> রয়েছে।</p><h3>HTML এর প্রধান ট্যাগসমূহ:</h3><p>১. <code><strong><html></strong></code>: HTML ডকুমেন্টের শুরু এবং শেষ নির্দেশ করে। ২. <code><strong><head></strong></code>: ডকুমেন্টের মেটাডেটা (যেমন শিরোনাম) ধারণ করে। ৩. <code><strong><title></strong></code>: ওয়েব পেজের টাইটেল নির্ধারণ করে, যা ব্রাউজারের ট্যাবে প্রদর্শিত হয়। ৪. <code><strong><body></strong></code>: HTML ডকুমেন্টের মূল কন্টেন্ট ধারণ করে। ৫. <code><strong><h1></strong></code><strong> থেকে </strong><code><strong><h6></strong></code>: বিভিন্ন স্তরের শিরোনাম তৈরি করে। <code><h1></code> সবচেয়ে বড় এবং <code><h6></code> সবচেয়ে ছোট। ৬. <code><strong><p></strong></code>: প্যারাগ্রাফ তৈরি করে। ৭. <code><strong><img></strong></code>: ইমেজ যোগ করার জন্য ব্যবহৃত হয়। ৮. <code><strong><a></strong></code>: হাইপারলিংক তৈরি করে, যা অন্য পেজ বা ওয়েবসাইটে নিয়ে যায়।</p><h3>সারসংক্ষেপ:</h3><p><strong>ওয়েব ডিজাইন</strong> হলো একটি প্রক্রিয়া যা ওয়েবসাইটের ভিজ্যুয়াল এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য কাজ করে, এবং <strong>HTML</strong> হলো সেই ভাষা যার মাধ্যমে ওয়েবসাইটের বেসিক স্ট্রাকচার তৈরি করা হয়। HTML ওয়েব ডিজাইনের ভিত্তি হিসেবে কাজ করে, যা CSS এবং JavaScript-এর মতো অন্যান্য প্রযুক্তি দিয়ে উন্নত করা যায়।</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-5 lg:grid-cols-2 xl:gap-10">
<div class="col-span-full">
<div class="flex flex-col">
<!-- Header Section -->
<div class="bg-gray-100 dark:bg-zinc-800 px-0 py-2 rounded-t-lg">
<div class="flex items-center justify-between px-4">
<h2 class="text-dark dark:text-gray-100 text-xl font-semibold">
Related Question
</h2>
<a href="https://sattacademy.com/all-mcq/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF"
class="inline-flex items-center gap-2 bg-white dark:bg-zinc-700 hover:bg-gray-50 dark:hover:bg-zinc-700 text-gray-900
dark:text-gray-100 px-2 py-1.5 rounded-lg transition-colors duration-200">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
<path d="M11 13l9 -9"></path>
<path d="M15 4h5v5"></path>
</svg>
View All
</a>
</div>
</div>
<!-- Question Cards -->
<div class="space-y-5">
<div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 font-sans text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between">
<a href="https://sattacademy.com/mcq/html%E0%A6%8F%E0%A6%B0-%E0%A6%AA%E0%A7%82%E0%A6%B0%E0%A7%8D%E0%A6%A3%E0%A6%B0%E0%A7%82%E0%A6%AA-%E0%A6%95%E0%A7%80" class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
1.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
<p>HTML-এর পূর্ণরূপ কী?</p>
</div>
</a>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 1 year ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 4 months ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 4 months ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4"
>
<li id="option-456542-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-456542-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hyper Text Markup Language
</div>
</div>
</li>
<li id="option-456542-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-456542-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hyper Text Makeup Language
</div>
</div>
</li>
<li id="option-456542-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-456542-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hyperlinked Textual Mapping Language
</div>
</div>
</li>
<li id="option-456542-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-456542-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hierarchical Textual Markup Link
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/psc-and-others/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%B8%E0%A6%A1%E0%A6%BC%E0%A6%95-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B9%E0%A6%A8-%E0%A6%95%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%83%E0%A6%AA%E0%A6%95%E0%A7%8D%E0%A6%B7-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BE%E0%A6%B2%E0%A6%95-%E0%A6%87%E0%A6%9E%E0%A7%8D%E0%A6%9C%E0%A6%BF%E0%A6%A8%E0%A6%BF%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%82-28-05-2024/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বাংলাদেশ সড়ক পরিবহন কর্তৃপক্ষ — সহকারী পরিচালক (ইঞ্জিনিয়ারিং)">
BRTA – Assistant Director (Engg.)
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%B8%E0%A6%A1%E0%A6%BC%E0%A6%95-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B9%E0%A6%A8-%E0%A6%95%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%83%E0%A6%AA%E0%A6%95%E0%A7%8D%E0%A6%B7-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BE%E0%A6%B2%E0%A6%95-%E0%A6%87%E0%A6%9E%E0%A7%8D%E0%A6%9C%E0%A6%BF%E0%A6%A8%E0%A6%BF%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%82-28-05-2024/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">1.7k</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> <div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 font-sans text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between">
<a href="https://sattacademy.com/mcq/%E0%A6%AC%E0%A7%8D%E0%A6%B0%E0%A6%BE%E0%A6%89%E0%A6%9C%E0%A6%BE%E0%A6%B0-%E0%A6%AF%E0%A6%A6%E0%A6%BF-%E0%A6%95%E0%A7%8B%E0%A6%A8%E0%A7%8B-%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A6%A3%E0%A7%87-%E0%A6%87%E0%A6%AE%E0%A7%87%E0%A6%9C-%E0%A6%B2%E0%A7%8B%E0%A6%A1-%E0%A6%95%E0%A6%B0%E0%A6%A4%E0%A7%87-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%B0%E0%A7%8D%E0%A6%A5-%E0%A6%B9%E0%A6%AF%E0%A6%BC-%E0%A6%A4%E0%A6%96%E0%A6%A8-%E0%A6%87%E0%A6%AE%E0%A7%87%E0%A6%9C%E0%A7%87%E0%A6%B0-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%87-%E0%A6%95%E0%A7%8B%E0%A6%A8-%E0%A6%9F%E0%A7%87%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%9F-" class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
2.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
<p>ব্রাউজার যদি কোনো কারণে ইমেজ লোড করতে ব্যর্থ হয় তখন ইমেজের পরিবর্তে কোন টেক্সট প্রদর্শনের জন্য ব্যবহৃত এট্রিবিউট কোনটি?</p>
</div>
</a>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 3 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 9 months ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 9 months ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4"
>
<li id="option-251346-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-251346-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
src
</div>
</div>
</li>
<li id="option-251346-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-251346-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
title
</div>
</div>
</li>
<li id="option-251346-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-251346-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
alt
</div>
</div>
</li>
<li id="option-251346-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-251346-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
align
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/psc-and-others/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="পিএসসি ও অন্যান্য নিয়োগ পরীক্ষা">
PSC
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BF%E0%A6%AE%E0%A6%BE%E0%A6%A8-%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%8F%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%B2%E0%A6%BE%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%B8-%E0%A6%B2%E0%A6%BF-%E0%A6%8F%E0%A6%A1%E0%A6%AE%E0%A6%BF%E0%A6%A8-%E0%A6%85%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%B8%E0%A6%BF%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%A8%E0%A7%8D%E0%A6%9F-04-03-2023/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বিমান বাংলাদেশ এয়ারলাইন্স লি. — এডমিন অ্যাসিস্ট্যান্ট ">
Biman Admin Assistant
</a>
<a href="https://sattacademy.com/%E0%A6%AC%E0%A6%BF%E0%A6%AE%E0%A6%BE%E0%A6%A8-%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%8F%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%B2%E0%A6%BE%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%B8-%E0%A6%B2%E0%A6%BF-%E0%A6%8F%E0%A6%A1%E0%A6%AE%E0%A6%BF%E0%A6%A8-%E0%A6%85%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%B8%E0%A6%BF%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%A8%E0%A7%8D%E0%A6%9F-04-03-2023/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">4k</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> <div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 font-sans text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between">
<a href="https://sattacademy.com/mcq/is-used-to-create-a-web-page" class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
3.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
______ is used to create a web page-
</div>
</a>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 4 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 2 weeks ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 2 weeks ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4"
>
<li id="option-77968-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-77968-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
HTTPS
</div>
</div>
</li>
<li id="option-77968-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-77968-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
WWW
</div>
</div>
</li>
<li id="option-77968-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-77968-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
URL
</div>
</div>
</li>
<li id="option-77968-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-77968-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
XML
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/probashi-kallyan-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="প্রবাসী কল্যাণ ব্যাংক পিএলসি">
PKB
</a>
<a href="https://sattacademy.com/%E0%A6%85%E0%A6%AB%E0%A6%BF%E0%A6%B8%E0%A6%BE%E0%A6%B0-%E0%A6%9C%E0%A7%87%E0%A6%A8%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%B2-12112021/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="প্রবাসী কল্যান ব্যাংক — অফিসার (জেনারেল) ">
PKB Officer
</a>
<a href="https://sattacademy.com/%E0%A6%85%E0%A6%AB%E0%A6%BF%E0%A6%B8%E0%A6%BE%E0%A6%B0-%E0%A6%9C%E0%A7%87%E0%A6%A8%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%B2-12112021/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">2k</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> <div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 font-sans text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between">
<a href="https://sattacademy.com/mcq/what-does-html-stand-for" class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
4.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
<p>What does HTML stand for?</p>
</div>
</a>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 8 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 4 months ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 4 months ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4"
>
<li id="option-33913-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-33913-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
<p>Hypo Thermal Mass Limiter</p>
</div>
</div>
</li>
<li id="option-33913-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-33913-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
<p>Hyper Text Markup Language</p>
</div>
</div>
</li>
<li id="option-33913-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-33913-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
<p>Hypo Thermal Motor Liquid</p>
</div>
</div>
</li>
<li id="option-33913-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-33913-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
<p>Hyper Test Machine Linguistic</p>
</div>
</div>
</li>
<li id="option-33913-5" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-33913-5" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঙ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
<p>High Tenure Mobile License</p>
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/standard-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="স্ট্যান্ডার্ড ইসলামী ব্যাংক পিএলসি">
Standard Bank
</a>
<a href="https://sattacademy.com/standard-bank-ltd-officer-2006/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="স্ট্যান্ডার্ড ব্যাংক - Officer">
Standard Officer
</a>
<a href="https://sattacademy.com/standard-bank-ltd-officer-2006/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">665</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> <div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 font-sans text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between">
<a href="https://sattacademy.com/mcq/what-does-html-stand-for-23022" class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
5.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
What does HTML stand for?
</div>
</a>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 8 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 9 months ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 9 months ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4"
>
<li id="option-32572-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-32572-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hypo Thermal Mass Limiter
</div>
</div>
</li>
<li id="option-32572-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-32572-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hyper Text Markup Language
</div>
</div>
</li>
<li id="option-32572-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-32572-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hypo Thermal Motor Liquid
</div>
</div>
</li>
<li id="option-32572-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-32572-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Hyper Text Machine Linguistics
</div>
</div>
</li>
<li id="option-32572-5" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-32572-5" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঙ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
High Tenure Mobile License
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/southeast-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="সাউথইস্ট ব্যাংক পিএলসি">
Southeast Bank
</a>
<a href="https://sattacademy.com/southeast-bank-ltd-officer-2008/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="সাউথইস্ট ব্যাংক - Officer">
Southeast Officer
</a>
<a href="https://sattacademy.com/southeast-bank-ltd-officer-2008/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">717</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> <div
class="mx-auto bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-700 p-3 font-sans text-zinc-800 dark:text-zinc-200 mb-4">
<div class="mb-4">
<div class="mb-2">
<div class="flex items-start justify-between">
<a href="https://sattacademy.com/mcq/css-is-an-acronym-for" class="group flex items-start gap-2">
<span
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500">
6.
</span>
<div
class="text-lg font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-blue-600 dark:group-hover:text-blue-500 leading-relaxed break-words">
CSS is an acronym for
</div>
</a>
</div>
<div class="p-0 leading-none">
<div class="hidden md:block">
<span class="text-[11px] text-gray-500">
Created: 8 years ago |
</span>
<span class="text-[11px] text-gray-500">
Updated: 5 months ago
</span>
</div>
<div class="md:hidden">
<span class="text-[11px] text-gray-500">
Updated: 5 months ago
</span>
</div>
</div> </div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4"
>
<li id="option-26885-1" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-emerald-600 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30">
<span id="label-26885-1" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-emerald-600 dark:bg-emerald-700 text-white dark:text-zinc-200">
ক
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Cascading Style Sheet
</div>
</div>
</li>
<li id="option-26885-2" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-26885-2" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
খ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Costume Style Sheet
</div>
</div>
</li>
<li id="option-26885-3" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-26885-3" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
গ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
Cascading System Style
</div>
</div>
</li>
<li id="option-26885-4" class="relative flex items-center p-2 rounded-xl border overflow-hidden
cursor-default border-gray-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-700">
<span id="label-26885-4" class="relative w-6 h-6 flex items-center justify-center rounded-full mr-2 text-sm shrink-0
bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400">
ঘ
</span>
<div class="flex-1 relative z-10">
<div class="text-sm text-zinc-700 dark:text-zinc-200">
None
</div>
</div>
</li>
</ul>
<div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2">
<a href="https://sattacademy.com/question-bank/bangladesh-bank/mcq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বাংলাদেশ ব্যাংক">
BB
</a>
<a href="https://sattacademy.com/bangladesh-bank-assistant-director-2014/all/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="বাংলাদেশ ব্যাংক - সহকারী পরিচালক ">
BB AD
</a>
<a href="https://sattacademy.com/bangladesh-bank-assistant-director-2014/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq-questions" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)">
কম্পিউটার ও তথ্য প্রযুক্তি (Computer & ICT)
</a>
<a href="https://sattacademy.com/all-mcq/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ওয়েব ডিজাইন পরিচিতি এবং HTML">
ওয়েব ডিজাইন পরিচিতি এবং HTML
</a>
</div>
<div x-data="{showDescription: false}" class="mt-3">
<div class="flex items-center justify-between gap-4 overflow-x-auto scrollbar-hide">
<button onclick="alert('ব্যাখ্যা দেখতে অনুগ্রহ করে লগইন করুন')" class="flex items-center gap-1 group">
<span
class="text-xs font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">ব্যাখ্যা</span>
<svg x-show="showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 rotate-180 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
<svg x-show="!showDescription" x-cloak xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
viewBox="0 0 24 24"
class="iconify text-lg transition-transform duration-200 text-blue-500 dark:text-blue-400">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="m19 9l-7 6l-7-6"></path>
</svg>
</button>
<div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar"
>
<div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path>
<path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path>
</g>
</svg>
<span class="text-md leading-none text-zinc-800 dark:text-zinc-200">1.2k</span>
</div>
<div class="flex items-center gap-3">
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')"
aria-label="Question Analytics"
title="Analytics">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md">
<path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path>
<path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer
text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400
"
onclick="alert('বুকমার্ক করতে লগইন করুন')"
class="text-zinc-400 hover:text-yellow-600"
aria-label="Bookmark question"
title="Bookmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path>
</svg>
</button>
<button
class="relative w-6 h-6 flex items-center justify-center rounded-full
text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400
"
onclick="alert('পছন্দ করতে লগইন করুন')"
class="text-zinc-400 hover:text-pink-500"
aria-label="Favorite question"
title="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
onclick="alert('রিপোর্ট করতে লগইন করুন')"
aria-label="Flag question"
title="Flag">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path>
</svg>
</button>
<button
class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
onclick="alert('শেয়ার করতে লগইন করুন')"
aria-label="Share question"
title="Share">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
<path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path>
<path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div>
</div>
<div class="my-4">
<style>
.t_wrap{
background:linear-gradient(135deg, #1a5c2e 0%, #2d8c4e 40%, #1a7a3a 70%, #0d4d20 100%);
border-radius:14px;
padding:24px 22px 20px;
font-family:'Hind Siliguri',Arial,sans-serif;
margin:0 auto;
overflow:hidden;
}
.t_badge{
display:inline-flex;align-items:center;gap:6px;
background:rgba(255,255,255,0.15);
border:1px solid rgba(255,255,255,0.25);
border-radius:20px;padding:4px 12px;margin-bottom:12px;
}
.t_badge .dot{width:7px;height:7px;border-radius:50%;background:#4caf50;}
.t_badge span{color:#fff;font-size:11px;font-weight:500;}
.title{color:#fff;font-size:clamp(15px,4vw,20px);font-weight:600;;margin-bottom:5px;}
.title span{color:#ffd54f;}
.sub{color:rgba(255,255,255,0.82);font-size:clamp(11px,2.8vw,13px);margin-bottom:16px;line-height:1.5;}
.sub b{color:#80d8ff;}
.marquee-wrap{
display:flex;flex-direction:column;gap:8px;
margin-bottom:16px;
overflow:hidden;
-webkit-mask:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
mask:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
}
.marquee-row{display:flex;gap:8px;width:max-content;}
.marquee-row.r1{animation:scroll-left 28s linear infinite;}
.marquee-row.r2{animation:scroll-left 22s linear infinite;}
@keyframes scroll-left{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}
.feat{
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.18);
border-radius:9px;
padding:7px 12px;
display:flex;align-items:center;gap:7px;
flex-shrink:0;
white-space:nowrap;
}
.fi{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fi svg{width:11px;height:11px;}
.ft{color:#fff;font-size:clamp(10px,2.3vw,12px);line-height:1.35;}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.btn-y{background:#ffd54f;color:#1a237e;border:none;border-radius:20px;padding:9px 22px;font-size:clamp(12px,2.8vw,13px);font-weight:700;cursor:pointer;font-family:'Hind Siliguri',Arial,sans-serif;}
.btn-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.45);border-radius:20px;padding:8px 18px;font-size:clamp(12px,2.8vw,13px);font-weight:500;cursor:pointer;font-family:'Hind Siliguri',Arial,sans-serif;}
.stats{display:flex;gap:16px;margin-left:auto;}
.stat .n{color:#ffd54f;font-size:13px;font-weight:700;}
.stat .l{color:rgba(255,255,255,0.7);font-size:10px;}
@media(max-width:380px){.stats{margin-left:0;width:100%;justify-content:space-around;}}
</style>
<div class="t_wrap">
<div class="t_badge"><div class="dot"></div><span>শিক্ষকদের জন্য বিশেষভাবে তৈরি</span></div>
<p class="title">১ ক্লিকে <span>প্রশ্ন, শীট, সাজেশন</span> ও<br>অনলাইন পরীক্ষা তৈরির সফটওয়্যার!</p>
<p class="sub">শুধু প্রশ্ন সিলেক্ট করুন — <b>প্রশ্নপত্র অটোমেটিক তৈরি!</b></p>
<div class="marquee-wrap">
<!-- Row 1 (6 items × 2 for seamless loop) -->
<div class="marquee-row r1">
<!-- set 1 -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4z"/></svg></div><span class="ft">প্রশ্ন এডিট করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div><span class="ft">জলছাপ দেয়া যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2"/></svg></div><span class="ft">ঠিকানা যুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M5 20h14"/></svg></div><span class="ft">Logo, Motto যুক্ত হবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></div><span class="ft">অটো প্রতিষ্ঠানের নাম</span></div>
<div class="feat"><div class="fi" style="background:rgba(128,222,234,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80deea" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><span class="ft">অটো সময়, পূর্ণমান</span></div>
<!-- set 2 (duplicate) -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4z"/></svg></div><span class="ft">প্রশ্ন এডিট করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div><span class="ft">জলছাপ দেয়া যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2"/></svg></div><span class="ft">ঠিকানা যুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M5 20h14"/></svg></div><span class="ft">Logo, Motto যুক্ত হবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></div><span class="ft">অটো প্রতিষ্ঠানের নাম</span></div>
<div class="feat"><div class="fi" style="background:rgba(128,222,234,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80deea" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><span class="ft">অটো সময়, পূর্ণমান</span></div>
</div>
<!-- Row 2 (6 items × 2 for seamless loop, slightly different speed) -->
<div class="marquee-row r2">
<!-- set 1 -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div><span class="ft">অটো নির্দেশনা (এডিটযোগ্য)</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div><span class="ft">অটো বিষয় ও অধ্যায়</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,138,128,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8a80" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="1.2" fill="#ff8a80" stroke="none"/><circle cx="15" cy="11" r="1.2" fill="#ff8a80" stroke="none"/></svg></div><span class="ft">OMR সংযুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="9" y1="20" x2="15" y2="20"/></svg></div><span class="ft">ফন্ট, কলাম, ডিভাইডার</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/></svg></div><span class="ft">প্রশ্ন/অপশন স্টাইল পরিবর্তন</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div><span class="ft">সেট কোড, বিষয় কোড</span></div>
<!-- set 2 (duplicate) -->
<div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div><span class="ft">অটো নির্দেশনা (এডিটযোগ্য)</span></div>
<div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div><span class="ft">অটো বিষয় ও অধ্যায়</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,138,128,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8a80" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="1.2" fill="#ff8a80" stroke="none"/><circle cx="15" cy="11" r="1.2" fill="#ff8a80" stroke="none"/></svg></div><span class="ft">OMR সংযুক্ত করা যাবে</span></div>
<div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="9" y1="20" x2="15" y2="20"/></svg></div><span class="ft">ফন্ট, কলাম, ডিভাইডার</span></div>
<div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/></svg></div><span class="ft">প্রশ্ন/অপশন স্টাইল পরিবর্তন</span></div>
<div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div><span class="ft">সেট কোড, বিষয় কোড</span></div>
</div>
</div>
<div class="cta">
<a href="https://sattacademy.com/e-question-builder" class="btn-y">এখনই শুরু করুন</a>
<a href="https://sattacademy.com/e-question-builder#question-list-section" class="btn-w">ডেমো দেখুন</a>
<div class="stats d-none d-md-flex">
<div class="stat"><div class="n">৫০,০০০+</div><div class="l">শিক্ষক</div></div>
<div class="stat"><div class="n">৩০ লক্ষ+</div><div class="l">প্রশ্নপত্র</div></div>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="md:col-span-1">
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-800 p-4 shadow-xs font-sans text-zinc-800 dark:text-zinc-200">
<div class="mb-10">
<!-- Title -->
<div class="mb-3">
<h3 class="text-gray-900 dark:text-gray-100 font-bold text-sm uppercase tracking-wide">
Related Question
</h3>
</div>
<!-- Divider -->
<div class="mb-4 h-px bg-gray-200 dark:bg-zinc-700"></div>
<!-- List -->
<div class="space-y-2 overflow-x-auto">
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/html%E0%A6%8F%E0%A6%B0-%E0%A6%AA%E0%A7%82%E0%A6%B0%E0%A7%8D%E0%A6%A3%E0%A6%B0%E0%A7%82%E0%A6%AA-%E0%A6%95%E0%A7%80"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
<p>HTML-এর পূর্ণরূপ কী?</p>
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/%E0%A6%AC%E0%A7%8D%E0%A6%B0%E0%A6%BE%E0%A6%89%E0%A6%9C%E0%A6%BE%E0%A6%B0-%E0%A6%AF%E0%A6%A6%E0%A6%BF-%E0%A6%95%E0%A7%8B%E0%A6%A8%E0%A7%8B-%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A6%A3%E0%A7%87-%E0%A6%87%E0%A6%AE%E0%A7%87%E0%A6%9C-%E0%A6%B2%E0%A7%8B%E0%A6%A1-%E0%A6%95%E0%A6%B0%E0%A6%A4%E0%A7%87-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%B0%E0%A7%8D%E0%A6%A5-%E0%A6%B9%E0%A6%AF%E0%A6%BC-%E0%A6%A4%E0%A6%96%E0%A6%A8-%E0%A6%87%E0%A6%AE%E0%A7%87%E0%A6%9C%E0%A7%87%E0%A6%B0-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%B0%E0%A7%8D%E0%A6%A4%E0%A7%87-%E0%A6%95%E0%A7%8B%E0%A6%A8-%E0%A6%9F%E0%A7%87%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%9F-"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
<p>ব্রাউজার যদি কোনো কারণে ইমেজ লোড করতে ব্যর্থ হয় তখন ইমেজের পরিবর্তে কোন টেক্সট প্রদর্শনের জন্য ব্যবহৃত এট্রিবিউট কোনটি?</p>
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/is-used-to-create-a-web-page"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
______ is used to create a web page-
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/what-does-html-stand-for"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
<p>What does HTML stand for?</p>
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/what-does-html-stand-for-23022"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
What does HTML stand for?
</a>
</div>
<div class="mb-1.5">
<a href="https://sattacademy.com/mcq/css-is-an-acronym-for"
class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700">
CSS is an acronym for
</a>
</div>
</div>
</div>
<a href="https://sattacademy.com/e-question-builder"
class="block p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg border border-dashed border-blue-200 dark:border-blue-800 hover:shadow-md transition-all duration-200 mb-4">
<div class="text-blue-800 dark:text-blue-200">
<span class="font-semibold text-lg">মাত্র ১৫ পয়সায় প্রশ্নপত্র</span>
<div class="text-blue-600 dark:text-blue-400 font-medium mt-1">
১ ক্লিকে প্রশ্ন, শীট, সাজেশন তৈরি করুন আজই
</div>
</div>
</a>
<style>
.ep {
background: linear-gradient(135deg, #1565c0 0%, #1e88e5 55%, #29b6f6 100%);
border-radius: 12px;
padding: clamp(16px, 4vw, 24px) clamp(14px, 4vw, 24px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
gap: 12px;
}
.ep-title {
color: #fff;
font-size: clamp(16px, 4.5vw, 22px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.3px;
}
.ep-sub {
color: rgba(255, 255, 255, 0.8);
font-size: clamp(11px, 2.8vw, 13px);
margin-top: -4px;
}
.ep-cta {
background: #43a047;
color: #fff;
border: none;
border-radius: 30px;
padding: 10px 28px;
font-size: clamp(12px, 3vw, 14px);
font-weight: 700;
cursor: pointer;
letter-spacing: 0.2px;
}
.ep-stats {
display: flex;
align-items: center;
gap: 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 30px;
padding: 6px 14px;
}
.ep-stat {
display: flex;
align-items: center;
gap: 5px;
}
.ep-stat svg {
flex-shrink: 0;
}
.ep-stat span {
font-size: clamp(10px, 2.5vw, 12px);
color: #fff;
}
.ep-divider {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.25);
}
</style>
<div class="ep">
<p class="ep-title">Complete Exam<br>Preparation</p>
<p class="ep-sub">Learn, practice, analyse and improve</p>
<div style="display: flex; gap: 12px;">
<a href="https://play.google.com/store/apps/details?id=com.sattacademy.app" target="_blank" rel="noopener" aria-label="Download SATT Academy app from Google Play">
<img src="/satt_logo/appstore.svg" alt="App Store" style="width: 120px; height: auto; cursor: pointer;">
</a>
<a href="https://play.google.com/store/apps/details?id=com.sattacademy.app" target="_blank" rel="noopener" aria-label="Download SATT Academy app from Google Play">
<img src="/satt_logo/playstore.svg" alt="Play Store" style="width: 120px; height: auto; cursor: pointer;">
</a>
</div>
<div class="ep-stats">
<div class="ep-stat">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.85)" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
<span>1M+ downloads</span>
</div>
<div class="ep-divider"></div>
<div class="ep-stat">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04">
<path
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
<span>4.6 · 8k+ Reviews</span>
</div>
</div>
</div> </div>
</div>
</div>
</div>
<div
x-data="{
questionId: null,
isLoading: true,
open: false,
analytics: {
total_attempts: 0,
correct_count: 0,
incorrect_count: 0,
skip_count: 0,
},
openModal(event) {
this.open = true;
this.questionId = event.id;
this.fetchAnalytics();
},
closeModal() {
this.open = false;
},
async fetchAnalytics() {
if (!this.questionId) return;
this.isLoading = true;
try {
const response = await fetch(`/question-analytics/${this.questionId}`);
const data = await response.json();
this.analytics = data || this.analytics;
this.isLoading = false;
this.$nextTick(() => this.drawChart());
} catch (error) {
console.error('Failed to fetch analytics:', error);
this.isLoading = false;
}
},
pct(val) {
if (!this.analytics.total_attempts) return '0%';
return (val / this.analytics.total_attempts * 100).toFixed(1) + '%';
},
drawChart() {
const svg = this.$refs.pieChart;
while (svg.firstChild) svg.removeChild(svg.firstChild);
const segments = [
{ value: this.analytics.correct_count, color: '#10B981' },
{ value: this.analytics.incorrect_count, color: '#EF4444' },
{ value: this.analytics.skip_count, color: '#F59E0B' },
];
const total = this.analytics.total_attempts;
if (!total) return;
const cx = 100, cy = 100, r = 80, ir = 50;
const ns = 'http://www.w3.org/2000/svg';
const isDark = document.documentElement.classList.contains('dark');
const holeFill = isDark ? '#3f3f46' : '#ffffff';
const labelColor = isDark ? '#a1a1aa' : '#6B7280';
const totalColor = isDark ? '#f4f4f5' : '#111827';
const polar = (deg) => {
const rad = (deg - 90) * Math.PI / 180;
return { x: +(cx + r * Math.cos(rad)).toFixed(4), y: +(cy + r * Math.sin(rad)).toFixed(4) };
};
const addEl = (tag, attrs) => {
const el = document.createElementNS(ns, tag);
Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
svg.appendChild(el); return el;
};
const nonZero = segments.filter(s => s.value > 0);
if (nonZero.length === 1) {
addEl('circle', { cx, cy, r, fill: nonZero[0].color });
} else {
let start = 0;
segments.forEach(s => {
if (!s.value) return;
let sweep = (s.value / total) * 360;
if (sweep >= 360) sweep = 359.9999;
const end = start + sweep;
const sp = polar(start), ep = polar(end);
addEl('path', {
d: `M ${cx} ${cy} L ${sp.x} ${sp.y} A ${r} ${r} 0 ${sweep > 180 ? 1 : 0} 1 ${ep.x} ${ep.y} Z`,
fill: s.color, stroke: holeFill, 'stroke-width': 2
});
start = end;
});
}
addEl('circle', { cx, cy, r: ir, fill: holeFill });
[['মোট', cy - 8, 12, labelColor, 400], [total, cy + 14, 22, totalColor, 500]]
.forEach(([text, y, size, fill, weight]) => {
const t = document.createElementNS(ns, 'text');
Object.entries({ x: cx, y, 'text-anchor': 'middle', 'font-size': size, fill, 'font-weight': weight })
.forEach(([k, v]) => t.setAttribute(k, v));
t.textContent = text;
svg.appendChild(t);
});
},
}"
x-show="open"
x-transition.opacity
@open-analytics-modal.window="openModal($event.detail)"
@keydown.escape.window="closeModal()"
@click.self="closeModal()"
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-3 sm:p-5"
x-cloak
>
<div class="bg-white dark:bg-zinc-800 w-full max-w-lg rounded-2xl shadow-xl p-5 sm:p-6 relative">
<!-- Close -->
<button @click="closeModal()"
class="absolute top-3 right-3 w-7 h-7 flex items-center justify-center rounded-full text-zinc-400 hover:text-red-500 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition text-sm">
✕
</button>
<!-- Title -->
<h4 class="text-center text-base sm:text-lg font-medium mb-5 text-zinc-900 dark:text-zinc-100">
Question Analytics
</h4>
<!-- Skeleton — matches exact layout of content below -->
<div x-show="isLoading" class="animate-pulse">
<div class="flex flex-col sm:flex-row gap-5 items-center">
<!-- Circle: must match svg w-36 h-36 sm:w-44 sm:h-44 exactly -->
<div class="w-36 h-36 sm:w-44 sm:h-44 rounded-full bg-zinc-200 dark:bg-zinc-700 shrink-0"></div>
<div class="w-full sm:flex-1 space-y-2">
<!-- Total card -->
<div class="h-14 bg-zinc-200 dark:bg-zinc-700 rounded-xl"></div>
<!-- 2-col grid -->
<div class="grid grid-cols-2 gap-2">
<div class="h-9 bg-zinc-200 dark:bg-zinc-700 rounded-lg"></div>
<div class="h-9 bg-zinc-200 dark:bg-zinc-700 rounded-lg"></div>
<div class="h-9 bg-zinc-200 dark:bg-zinc-700 rounded-lg col-span-2"></div>
</div>
</div>
</div>
</div>
<!-- Content -->
<div x-show="!isLoading" class="space-y-5">
<!-- Chart + Stats -->
<div class="flex flex-col sm:flex-row items-center gap-5">
<!-- Donut: w-36 h-36 on mobile, w-44 h-44 on sm+ -->
<svg x-ref="pieChart" viewBox="0 0 200 200"
class="w-36 h-36 sm:w-44 sm:h-44 shrink-0 mx-auto sm:mx-0">
</svg>
<!-- Stat cards -->
<div class="w-full sm:flex-1 space-y-2">
<div class="bg-zinc-50 dark:bg-zinc-700/60 rounded-xl px-4 py-3 border border-zinc-100 dark:border-zinc-700">
<p class="text-xs text-zinc-400 dark:text-zinc-500">মোট উত্তরদাতা</p>
<p class="text-xl sm:text-2xl font-medium text-zinc-900 dark:text-zinc-100 mt-0.5 leading-none">
<span x-text="analytics.total_attempts"></span>
<span class="text-xs sm:text-sm font-normal text-zinc-400 ml-1">জন</span>
</p>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="flex items-center gap-2 bg-zinc-50 dark:bg-zinc-700/60 rounded-lg px-3 py-2.5 border border-zinc-100 dark:border-zinc-700">
<div class="w-2 h-2 rounded-full bg-emerald-500 shrink-0"></div>
<span class="flex-1 text-xs text-zinc-500 dark:text-zinc-400">সঠিক</span>
<span class="text-xs font-semibold text-emerald-500" x-text="analytics.correct_count"></span>
</div>
<div class="flex items-center gap-2 bg-zinc-50 dark:bg-zinc-700/60 rounded-lg px-3 py-2.5 border border-zinc-100 dark:border-zinc-700">
<div class="w-2 h-2 rounded-full bg-red-500 shrink-0"></div>
<span class="flex-1 text-xs text-zinc-500 dark:text-zinc-400">ভুল</span>
<span class="text-xs font-semibold text-red-500" x-text="analytics.incorrect_count"></span>
</div>
<div class="col-span-2 flex items-center gap-2 bg-zinc-50 dark:bg-zinc-700/60 rounded-lg px-3 py-2.5 border border-zinc-100 dark:border-zinc-700">
<div class="w-2 h-2 rounded-full bg-amber-400 shrink-0"></div>
<span class="flex-1 text-xs text-zinc-500 dark:text-zinc-400">উত্তর নেই</span>
<span class="text-xs font-semibold text-amber-500" x-text="analytics.skip_count"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</main>
<style>
/* --- CSS Variables for Light/Dark Mode --- */
:root {
--bottom-ad-bg: #ffffff;
--bottom-ad-text: #212529;
--bottom-ad-border: #70707030;
--bottom-ad-btn-bg: #ffffff;
}
html.dark,
html.dark-mode {
--bottom-ad-bg: #1f2937;
--bottom-ad-text: #f3f4f6;
--bottom-ad-border: #374151;
--bottom-ad-btn-bg: #374151;
}
/* --- Base Offcanvas Container --- */
.bottom-offcanvas {
position: fixed;
left: 0;
background: var(--bottom-ad-bg);
color: var(--bottom-ad-text);
width: 100%;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
opacity: 0;
visibility: hidden;
z-index: 2000;
height: fit-content !important;
}
/* --- Top Orientation Styles --- */
.bottom-offcanvas.is-top {
top: 0;
border-bottom: 1px solid var(--bottom-ad-border);
transform: translateY(-100%);
}
.is-top .bottom-ads-close-btn {
bottom: -32px;
border-radius: 0 0 6px 6px;
border-top: 0;
}
/* --- Bottom Orientation Styles --- */
.bottom-offcanvas.is-bottom {
bottom: 0;
border-top: 1px solid var(--bottom-ad-border);
transform: translateY(100%);
}
.is-bottom .bottom-ads-close-btn {
top: -32px;
border-radius: 6px 6px 0 0;
border-bottom: 0;
}
/* --- State: Active (Slide In) --- */
.bottom-offcanvas.active {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
/* --- Toggle Buttons --- */
.bottom-ads-open-btn,
.bottom-ads-close-btn {
background-color: var(--bottom-ad-btn-bg);
color: var(--bottom-ad-text);
left: 0;
position: fixed;
padding: 4px 16px;
z-index: 9999;
border: 1px solid var(--bottom-ad-border);
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.bottom-ads-open-btn {
opacity: 0.5;
transition: opacity 0.3s ease;
display: none;
}
.bottom-ads-open-btn:hover {
opacity: 1;
}
/* Trigger Button Positions */
.pos-top-btn { top: 0; border-radius: 0 0 6px 6px; border-top: 0; }
.pos-bottom-btn { bottom: 0; border-radius: 6px 6px 0 0; border-bottom: 0; }
/* --- Subscription Button Animation --- */
.subscription-btn {
background: linear-gradient(45deg, var(--sa-bg-primary, #007bff), var(--sa-bg-secondary-300, #6610f2), #0be93b, var(--sa-bg-secondary-300, #6610f2), var(--sa-bg-primary, #007bff));
background-size: 400% 400%;
animation: gradient 15s ease infinite;
color: #fff !important;
border: 0px;
}
@keyframes gradient {
0% { background-position: 0 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
#bottom-fixed-ad-content { width: 100%; min-height: 50px; }
/* --- Replaced Bootstrap Classes (namespaced to avoid conflicts) --- */
.bottom-ad-hidden { display: none; }
.bottom-ad-relative { position: relative; }
.bottom-ad-absolute { position: absolute; }
.bottom-ad-shadow { box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
.bottom-ad-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.bottom-ad-col-12 { width: 100%; padding: 0 15px; box-sizing: border-box; }
@media (min-width: 576px) {
.bottom-ad-col-sm-7 { width: 58.333333%; padding: 0 15px; box-sizing: border-box; }
.bottom-ad-col-sm-5 { width: 41.666667%; padding: 0 15px; box-sizing: border-box; }
}
.bottom-ad-mx-auto { margin-left: auto; margin-right: auto; }
.bottom-ad-pt-4 { padding-top: 1.5rem; }
.bottom-ad-pb-2 { padding-bottom: 0.5rem; }
.bottom-ad-px-3 { padding-left: 1rem; padding-right: 1rem; }
.bottom-ad-mb-2 { margin-bottom: 0.5rem; }
.bottom-ad-text-center { text-align: center; }
.bottom-ad-text-dark { color: var(--bottom-ad-text); }
.bottom-ad-text-white { color: #ffffff; }
.bottom-ad-fs-4 { font-size: 1.5rem; }
.bottom-ad-fs-5 { font-size: 1.25rem; }
.bottom-ad-w-100 { width: 100%; }
.bottom-ad-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.bottom-ad-border-0 { border: none; }
.bottom-ad-btn { display: inline-block; border: none; cursor: pointer; text-decoration: none; font-family: inherit; }
.bottom-ad-btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.bottom-ad-align-center { align-items: center; }
</style>
<div class="bottom-ad-relative" id="footer-bottom-ads" style="display: none">
<button class="bottom-ad-btn-sm bottom-ad-shadow bottom-ad-hidden" id="ad-open-trigger" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bottom-ad-text-dark bottom-ad-fs-4"><path d="m6 15 6-6 6 6"/></svg>
</button>
<div class="bottom-offcanvas" id="bottom-offcanvas">
<button type="button" class="bottom-ads-close-btn bottom-ad-border-0 bottom-ad-absolute bottom-ad-shadow"
aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bottom-ad-text-dark bottom-ad-fs-4"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div style="max-width: 1200px;" class="bottom-ad-mx-auto bottom-ad-pt-4 bottom-ad-pb-2 bottom-ad-px-3">
<div class="bottom-ad-row bottom-ad-align-center">
<div class="bottom-ad-col-12 bottom-ad-mb-2">
<div id="bottom-fixed-ad-content">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TKRYEG0LTD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-TKRYEG0LTD');
</script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
window.addEventListener('load', function() {
google.accounts.id.initialize({
client_id: "628877956961-qhkeatldt9371l65e3drolrv3a2t19uv.apps.googleusercontent.com",
callback: handleCredentialResponse,
auto_select: false,
cancel_on_tap_outside: false,
context: 'signin',
});
google.accounts.id.prompt();
});
async function handleCredentialResponse(response) {
try {
const res = await fetch('/google-login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
},
body: JSON.stringify({
credential: response.credential
}),
});
const data = await res.json();
if (data.success) {
window.location.href = '/';
} else {
toastr.error('Login failed. Please try again.');
}
} catch (err) {
console.error('Google login error:', err);
toastr.error('Something went wrong.');
}
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const isBot = /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent);
if(isBot) {
return;
}
if (typeof axios !== 'undefined') {
axios.post('/update-presence').catch(function(err) {
console.warn('Presence update failed:', err);
});
}
});
</script>
<script>
document.querySelectorAll('.pill').forEach(p => {
setTimeout(() => p.classList.add('show'), 50);
});
function showToast(msg) {
const t = document.getElementById('toast');
if (!t) return; // Guard clause
t.textContent = msg;
t.classList.add('show');
clearTimeout(window._tt);
window._tt = setTimeout(() => t.classList.remove('show'), 2200);
}
function addRipple(btn) {
const r = document.createElement('span');
r.className = 'ripple';
btn.appendChild(r);
setTimeout(() => r.remove(), 500);
}
// Safely attach listeners using Optional Chaining or If checks
const mcqBtn = document.getElementById('mcqBtn');
if (mcqBtn) {
mcqBtn.addEventListener('click', function () {
addRipple(this);
showToast('199 টি MCQ লোড হচ্ছে...');
});
}
const cqBtn = document.getElementById('cqBtn');
if (cqBtn) {
cqBtn.addEventListener('click', function () {
addRipple(this);
showToast('91টি CQ লোড হচ্ছে...');
});
}
const pracBtn = document.getElementById('pracBtn');
if (pracBtn) {
pracBtn.addEventListener('click', function () {
showToast('Practice শুরু হচ্ছে!');
});
}
</script>
<script>
(function() {
'use strict';
document.addEventListener('DOMContentLoaded', function() {
var footerBottomAds = document.getElementById('footer-bottom-ads');
var offcanvas = document.getElementById('bottom-offcanvas');
var openBtn = document.getElementById('ad-open-trigger');
var closeBtn = document.querySelector('.bottom-ads-close-btn');
var iconOpen = openBtn ? openBtn.querySelector('svg') : null;
var iconClose = closeBtn ? closeBtn.querySelector('svg') : null;
if (!footerBottomAds || !offcanvas || !openBtn || !closeBtn || !iconOpen || !iconClose) {
return;
}
// 1. Randomly decide Top (true) or Bottom (false)
// var isTop = Math.random() < 0.5;
var isTop = false;
var chevronUpPath = 'm6 15 6-6 6 6';
var chevronDownPath = 'm6 9 6 6 6-6';
if (isTop) {
// Apply Top logic
offcanvas.classList.add('is-top');
openBtn.classList.add('pos-top-btn');
// Switch icons so they point the correct way
iconOpen.querySelector('path').setAttribute('d', chevronDownPath);
iconClose.querySelector('path').setAttribute('d', chevronUpPath);
} else {
// Apply Bottom logic
offcanvas.classList.add('is-bottom');
openBtn.classList.add('pos-bottom-btn');
}
// 2. Initial Display
setTimeout(function() {
footerBottomAds.style.display = 'block';
offcanvas.classList.add('active');
}, 5000);
// 3. Load Ad Content
fetch("https://sattacademy.com/bottom-ad-content")
.then(function(response) {
return response.json();
})
.then(function(data) {
var contentDiv = document.getElementById('bottom-fixed-ad-content');
if (data.show_bottom_fixed_ad && contentDiv) {
contentDiv.innerHTML = data.bottom_fixed_ad_content;
}
})
.catch(function(error) {
console.error('Error loading bottom ad content:', error);
});
// 4. Toggle Interaction Logic
closeBtn.addEventListener('click', function() {
openBtn.classList.remove('bottom-ad-hidden');
offcanvas.classList.remove('active');
});
openBtn.addEventListener('click', function() {
this.classList.add('bottom-ad-hidden');
offcanvas.classList.add('active');
});
});
})();
</script>
<!-- Global Functions -->
<script>
function toggleMobileSidebar() {
var s = document.getElementById('mobile-sidebar');
if (s) s.classList.toggle('open');
}
function toggleTheme() {
var html = document.documentElement;
var isDark = html.classList.contains('dark');
var next = isDark ? 'light' : 'dark';
html.classList.toggle('dark', next === 'dark');
html.classList.toggle('light', next === 'light');
localStorage.setItem('theme', next);
}
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('click', function (e) {
var s = document.getElementById('mobile-sidebar');
var btn = document.querySelector('[onclick="toggleMobileSidebar()"]');
if (s && s.classList.contains('open')) {
if (!s.contains(e.target) && (!btn || !btn.contains(e.target))) {
s.classList.remove('open');
}
}
});
});
</script>
<!-- Mobile Sidebar -->
<script src="https://sattacademy.com/js/inspect.js" defer></script>
<script type="text/javascript">
// Apply Copy limit
document.addEventListener('DOMContentLoaded', () => {
const dailyCopyLimit = 50; // Daily copy limit
const copyCountKey = 'dcc'; // Daily copy count key
const lastResetKey = 'dcc_lrt'; // Last reset time key
// Helper function to reset the copy count daily
const resetCopyCountIfNeeded = () => {
const now = new Date();
const today = now.toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
const lastReset = localStorage.getItem(lastResetKey);
if (lastReset !== today) {
localStorage.setItem(copyCountKey, 0); // Reset count
localStorage.setItem(lastResetKey, today); // Update reset time
}
};
resetCopyCountIfNeeded();
// Copy event listener
document.addEventListener('copy', (e) => {
e.preventDefault();
const selection = document.getSelection();
if (selection.toString().length === 0) {
return;
}
let currentCount = parseInt(localStorage.getItem(copyCountKey)) || 0;
if (currentCount >= dailyCopyLimit) {
Swal.fire({
icon: 'error',
title: 'Copy Limit Exceeded',
text: `You have reached the daily copy limit of ${dailyCopyLimit}. Please come back tomorrow!`,
});
return;
}
// Append additional text to copied content
const additionalText =
"\n\nCopied from SATT ACADEMY. Visit us at: https://sattacademy.com";
const modifiedText = selection + additionalText;
e.clipboardData.setData('text/plain', modifiedText);
// Increment copy count
currentCount++;
localStorage.setItem(copyCountKey, currentCount);
if (currentCount % 10 === 0) {
alert(
`You have used ${currentCount} out of ${dailyCopyLimit} copies available today.`
);
}
});
});
</script> </body>
</html>
